<template>
	<view class="">
		<!-- <view class="item"> -->
			<view class="cont_li" style="display: flex;margin: 15px 0px;">
				<image style="width: 30rpx;height: 35rpx;margin: 5px 0px;" src="/static/img/ljlc/yd.png" mode=""></image>
				<view style="color: #fff;margin: 0 10px;" class="cont_li_label">运单编号:</view>
				<view  style="color: #fff;" class="cont_li_value">{{infoData.billNo}} </view>
			</view>
			<view class="top_hw" >
				<view class="top_tle">
				<view class="top_left">
					<image style="width: 37rpx;height: 37rpx;margin: 5px 5px;" src="/static/img/ljlc/car.png" mode=""></image>
					<text v-if="infoData.billState == '10'" style="color: #168EEC;font-size: 12px;">已派单</text>
					<text  v-if="infoData.billState == '11'" style="color: #168EEC;font-size: 12px;">已发车</text>
					<text  v-if="infoData.billState == '20'" style="color: #168EEC;font-size: 12px;">已装货</text>
					<text  v-if="infoData.billState == '30'" style="color: #168EEC;font-size: 12px;">运输中</text>
					<text  v-if="infoData.billState == '40'" style="color: #168EEC;font-size: 12px;">已卸货</text>
					<text  v-if="infoData.billState == '50'" style="color: #168EEC;font-size: 12px;">已完成</text>
					<text  v-if="infoData.billState == '60'" style="color: #168EEC;font-size: 12px;">已回场</text>
					<!-- <text  v-if="infoData.billState == '10'" style="color: #168EEC;font-size: 12px;">已作废</text> -->
				</view>	
				<view class="top_right">
					
					<text v-if="infoData.isCityDistribution == 1">城市配送</text>
					<text v-if="infoData.isMedicineDangerScrap == 1">医疗废物</text>
				</view>	
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<view class="">
						<view class="q">
							起
						</view>
						<view class="limsx">
							
						</view>
						<view class="z">
							止
						</view>
					</view>
					<view style="margin-left: 10px;">
						<view class="">
						
							<view class="txt">
									<!-- <textarea :value="infoData.beginDetailAddress[0]" placeholder="" /> -->
								{{infoData.beginDetailAddress[0]}}
							</view>
							<view class="rq">
								起运日期：{{infoData.loadingDate}}
							</view>
						</view>
						<view style="margin-top: 43px;">
							<view class="txt">
								{{infoData.endDetailAddress[0]}}
							</view>
							<view class="rq">
								预计到达日期：{{infoData.unloadingDate}}
							</view>
						</view>
					</view>
				</view>
				<view class="hwbox">
					<view class="hwtle">
						货物信息
					</view>
					<view class="wz" style="z-index: 9 !important;" >
						<view style="overflow: auto;max-height: 269rpx;">{{infoData.goodsInfo}}</view>
						<!-- <view  style="overflow: auto;max-height: 269rpx;">就阿斯哦对静安寺降低票价阿斯哦对就看见了看着就少得可怜静安寺old就哦啊啤酒拍就拍绝对是恐怕就安排的接口叫阿里喀什角动量喀什角动量卡就是老款的键盘上自己的咔叽顺口溜的骄傲离开家卡拉斯科建档立卡即使考虑到尽快卡萨丁莱卡徕卡角度来看就爱看涉及到了卡死了的空间卢卡斯角度来看记录卡觉得就爱看涉及到了卡就是利空打击就撒了看见分厘卡时间到了卢卡斯到了喀拉喀什角动量空间喀什考虑到记录卡决定了卢卡斯拉开点距离喀什角动量</view> -->
						
					
					</view>
					<view class="hwtb"  >
						<!-- <image style="width: 144rpx;height: 139rpx;" src="/static/img/ljlc/hw_img.png" mode=""></image> -->
					</view>
					
				</view>
			</view>
			<!-- <view class="black_bar"></view>
			<view class="item_top">
				<view class="item_title">运单信息</view>
			</view> -->
		
		<!-- </view> -->
		<!--  -->
	<!-- 	<view class="item">
			<view class="black_bar"></view>
			<view class="item_top">
				<view class="item_title">货物信息</view>
			</view>
			<view class="item_cont">
				<view class="cont_li">
					<view class="cont_li_label">联合国编号</view>
					<view class="cont_li_value" v-if="isString=='other'">{{gInfo[1].split(':')[1]}}</view>
					<view class="cont_li_value" v-else>UN{{infoData.unCode}}</view>

				</view>
				<view class="cont_li">
					<view class="cont_li_label">类别项别</view>
					<view class="cont_li_value" v-if="isString=='other'">
						{{gInfo[3]}}
					</view>
					<view class="cont_li_value" v-else>
						{{infoData.category}}{{infoData.termOther=='无'?'类':'类'+infoData.termOther+'项'}}
					</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">危险货物运输名称</view>
					<view class="cont_li_value" v-if="isString=='other'">{{gInfo[2]}}
					</view>
					<view class="cont_li_value" v-else>{{infoData.ownerGoodsAlias}}
					</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">包装类别</view>
					<view class="cont_li_value" v-if="isString=='other'">{{gInfo[4]}}
					</view>
					<view class="cont_li_value" v-else>{{infoData.pkgType}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">包装规格</view>
					<view class="cont_li_value" v-if="isString=='other'">{{gInfo[5]}}</view>
					<view class="cont_li_value" v-else>{{infoData.pkgSpec}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">数量</view>
					<view class="cont_li_value" v-if="isString=='other'">
						{{ gInfo[6].indexOf(';')!=-1?gInfo[6].split(';')[0]:gInfo[6]}}
					</view>
					<view class="cont_li_value" v-else>{{(infoData.goodsNumber).toFixed(2)}} {{infoData.goodsUnit}}
					</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">重量</view>
					<view class="cont_li_value">{{infoData.goodsWeight}} 吨</view>
				</view>
			</view>
		</view> -->
		<!--  -->
		<!-- <view class="black_bar"></view> -->
		<view class="item">
			
			<view class="item_cont">
				<view class="item_top">
					<view class="item_title">托运人</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">名称:</view>
					<view class="cont_li_value">{{infoData.consignName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.consignTel}}</view>
				</view>
			</view>
		</view>
		
		<!--  -->
		<view class="item">
			<!-- <view class="black_bar"></view> -->
		
			<view class="item_cont">
				<view class="item_top">
					<view class="item_title">装货人</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">名称:</view>
					<view class="cont_li_value">{{infoData.shipperName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.shipperTel}}</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="item">
			<!-- <view class="black_bar"></view> -->
			
			<view class="item_cont">
				<view class="item_top">
					<view class="item_title">收货人</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">名称:</view>
					<view class="cont_li_value">{{infoData.receiveName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.receiveTel}}</view>
				</view>
				<!-- <view class="cont_li">
					<view class="cont_li_label">起运日期</view>
					<view class="cont_li_value">{{infoData.loadingDate}}</view>
				</view> -->
				<!-- <view class="cont_li" v-for="i in infoData.beginDetailAddress">
					<view class="cont_li_label">起运地</view>
					<view class="cont_li_value">{{i}}</view>
				</view> -->
				<!-- <view class="cont_li" v-if="infoData.endDetailAddress=='空'">
					<view class="cont_li_label">目的地</view>
				</view> -->
			<!-- 	<view v-else>
					<view class="cont_li" v-for="k in infoData.endDetailAddress">
						<view class="cont_li_label">目的地</view>
						<view class="cont_li_value">{{k}}</view>
					</view>
				</view> -->

			</view>
		</view>
		<!--  -->
	<!-- 	<view class="item_cont">
			
			<view class="cont_li">
				<view class="cont_li_label">车牌号牌</view>
				<view class="cont_li_value">{{infoData.vehCode}}</view>
			</view>
			<view class="cont_li">
				<view class="cont_li_label">挂车号牌</view>
				<view class="cont_li_value">{{infoData.trailerVehCode}}</view>
			</view>
			<view class="cont_li">
				<view class="cont_li_label">驾驶员</view>
				<view class="cont_li_value">{{infoData.driverName}}</view>
			</view>
			<view class="cont_li">
				<view class="cont_li_label">押运员</view>
				<view class="cont_li_value">{{infoData.escortName}}</view>
			</view> -->
		
		<!-- </view> -->
		<view class="itemz">
			<!-- <view class="black_bar"></view> -->
			
			<view class="item_cont">
				<view class="item_top">
					<view class="item_title">承运人</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">单位名称:</view>
					<view class="cont_li_value">{{infoData.carriageName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.carriageTel}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">许可证号:</view>
					<view class="cont_li_value">{{infoData.carriageCertNo}}</view>
				</view>
				<view class="xian">
					
				</view>
				<view class="item_top">
					<view class="item_title">车辆信息</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">车辆号牌（颜色）:</view>
					<view class="cont_li_value">{{infoData.vehCode}}
		<text v-if="infoData.vehColor == '黄色'" class="carys">黄</text>
			<text class="carys1" v-if="infoData.vehColor == '蓝色'">蓝</text>	
		<text class="carys2" v-if="infoData.vehColor == '黑色'">黑</text>			
			<text class="carys3" v-if="infoData.vehColor == '白色'">白</text>	
				<text class="carys4" v-if="infoData.vehColor == '绿色'">绿</text>	
				<text class="carys4" v-if="infoData.vehColor == '黄绿色'">绿</text>
				<text class="carys4" v-if="infoData.vehColor == '渐变绿'">绿</text>
					</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">道路运输证号:</view>
					<view class="cont_li_value">{{infoData.vehCertNo}}</view>
				</view>
				<view class="xian">
					
				</view>
				<view class="item_top">
					<view class="item_title">挂车信息</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">车辆号牌（颜色）:</view>
					<view class="cont_li_value">{{infoData.trailerVehCode}}
					
		<text v-show="infoData.trailerVehCode != '无'" class="carys">黄</text>
<!-- 	<text class="carys1">蓝</text>
	<text class="carys2" >黑</text>			
		<text class="carys3" >白</text>	
			<text class="carys4">绿</text> -->	
				<!-- <text v-if="infoData.vehColor == '黄色'">黄</text> -->
				
					</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">道路运输证号:</view>
					<view class="cont_li_value">{{infoData.trailerCertNo}}</view>
				</view>
				<view class="xian">
					
				</view>
				<view class="item_top">
					<view class="item_title">罐体信息</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">罐体编号:</view>
					<view class="cont_li_value">{{infoData.tankNo}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">罐体容积:</view>
					<view class="cont_li_value">{{infoData.tankVolume}}㎡</view>
				</view>
				<view class="xian">
					
				</view>
				<view class="item_top">
					<view class="item_title">驾驶员</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">姓名:</view>
					<view class="cont_li_value">{{infoData.driverName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">从业资格证号:</view>
					<view class="cont_li_value">{{infoData.driverCertNo}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.driverTel}}</view>
				</view>
				<view class="xian">
					
				</view>
				<view class="item_top">
					<view class="item_title">押运员</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">姓名:</view>
					<view class="cont_li_value">{{infoData.escortName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">从业资格证号:</view>
					<view class="cont_li_value">{{infoData.escortCertNo}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">联系电话:</view>
					<view class="cont_li_value">{{infoData.escortTel}}</view>
				</view>
			</view>
		</view>
		<view class="item">
			
			<view class="item_cont">
				<view class="item_top">
					<view class="item_title">调度人</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">姓名:</view>
					<view class="cont_li_value">{{infoData.dispUserName}}</view>
				</view>
				<view class="cont_li">
					<view class="cont_li_label">调度日期:</view>
					<view class="cont_li_value">{{infoData.dispTime}}</view>
				</view>
			</view>
		</view>
		<view class="item">
			
			<view class="item_cont">
			
				<view class="cont_li">
					<view class="cont_li_label">备注:</view>
					<!-- <view class="cont_li_value">{{infoData.consignName}}</view> -->
				</view>
				<view class="cont_li">
				
					<view class="cont_li_value">{{infoData.note}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBillInfo,
		getFirBillInfo
	} from '@/common/api/monitor.js'
	export default {
		data() {
			return {
				infoData: {},
				queryData: null,
				isString: "",
				gInfo: [],
				hwtle:''
			};
		},
		mounted() {
			// var box = document.getElementById('txt');
			// if (box.scrollHeight > box.offsetHeight) {
			//     box.style.height = box.scrollHeight + 'px';
			// }
			// console.log(312223, this.$store.state.roadCheckInfo)
			// console.log(3123, this.$store.state.roadCheckInfo.lineName.split('-'))
			if (this.$store.state.roadCheckInfo || this.$store.state.roadCheckInfo.billNo) {
				this.infoData = this.$store.state.roadCheckInfo
				// goodsInfo
				// 查找第一个逗号的位置
				// var firstCommaIndex = this.infoData.goodsInfo.indexOf(',');
				
				// // 截取第一个逗号之前的文字
				// var result = this.infoData.goodsInfo.substring(0, firstCommaIndex);
				// this.hwtle = result
    //      console.log(result,this.infoData.goodsInfo,888)
				
				this.gInfo = this.infoData.lineName.split('--')
				// console.log(this.ginfo)
				for (let key in this.infoData) {
					if (this.infoData[key] === "") {
						this.infoData[key] = "无"
					}
					if (this.infoData.endDetailAddress && this.infoData.endDetailAddress.length == 0) {
						this.infoData.endDetailAddress = '空'
					}
				}
				this.infoData.tankVolume = Number(this.infoData.tankVolume).toFixed(1)
			}


			if (this.$store.state.roadCheckInfo.vehCode.slice(0, 1) !== '鄂' && this.$store.state.roadCheckInfo.billNo
				.slice(0, 2) !== '42') {
				// this.isOther = true
				this.isString = 'other'

				this.gInfo = this.infoData.lineName.split('-')

				// console.log(3123, this.infoData.lineName.split('-'))
			}
			// //车牌号搜索
			// if(this.queryData.vehCode){
			// 	let params = {
			// 		vehCode:this.queryData.vehCode
			// 	}
			// 	this.getFirBillInfo(params)
			// }
			// //扫二维码
			// if(this.queryData.qrCode){
			// 	let params = {
			// 		qrCode:this.queryData.qrCode
			// 	}
			// 	this.getBillInfo(params)
			// }

		},
		// onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log('传递的参数', option);
		// 	this.queryData = option
		// },
		methods: {
			// getBillInfo(params) {
			// 	getBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// },
			// //车牌号车牌颜色查询
			// getFirBillInfo(params){
			// 	getFirBillInfo(params).then(res => {
			// 		console.log(res, '电子运单信息');
			// 		this.infoData = res.data.data
			// 	})
			// }
		},
	}
</script>

<style lang="scss">
	.carys{ //黄
		width: 40rpx;
		height: 40rpx;
		background: #EFD400;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys1{ //蓝
		width: 40rpx;
		height: 40rpx;
		background: #168EEC;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys2{ //黑
		width: 40rpx;
		height: 40rpx;
		background: #21231e;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.carys3{ //白
		width: 40rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
	}
	.carys4{ //绿
		width: 40rpx;
		height: 40rpx;
		background: #1a9e34;
		border-radius: 7rpx;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
	}
	.top_hw{
		width: 692rpx;
		height: 737rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 15px;
		box-sizing: border-box;
       .top_tle{
		   display: flex;
		   justify-content: space-between;
		   .top_left{
			     display: flex;
			   width: 156rpx;
			   height: 58rpx;
			   line-height: 58rpx;
			   background: linear-gradient( 270deg, rgba(22,142,236,0) 0%, rgba(22,142,236,0.3) 100%);
			   border-radius: 7rpx;
			   // .aa{
				  //  transform: translateY(-10px);
			   // }
		   }
		   .top_right{
			   width: 101rpx;
			   height: 36rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 400;
			   font-size: 25rpx;
			   color: #449D80;
			   line-height: 36rpx;
			   text-align: left;
			   font-style: normal;
		   }
	   }
	   .limsx{
		   width: 0rpx;
		   height: 121rpx;
		   border: 2rpx dashed  #4D6CA9;
		       margin-left: 7px;
	   }
	   .q{
		   width: 40rpx;
		   height: 40rpx;
		   background: #168EEC;
		   border-radius: 7rpx;
		    color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 25rpx;
	   }
	   .z{
		  width: 40rpx;
		  height: 40rpx;
		  background: #B5B9C2;
		  border-radius: 7rpx; 
		  color: #fff;
		  text-align: center;
		  line-height: 40rpx;
		  font-size: 25rpx;
	   }
	   .txt{
		   width: 100%;
		   // height: 40rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 500;
		   font-size: 29rpx;
		   color: #333333;
		   line-height: 30rpx;
		   text-align: left;
		   font-style: normal;
		    display: -webkit-box;
		       -webkit-line-clamp: 3; /* 限制显示的行数 */
		       -webkit-box-orient: vertical;
		       overflow: hidden;
	   }
	   .rq{
		   width: 370rpx;
		   height: 36rpx;
		   font-family: PingFangSC, PingFang SC;
		   font-weight: 400;
		   font-size: 25rpx;
		   color: #999999;
		   line-height: 36rpx;
		   text-align: left;
		   font-style: normal;
	   }
	   .hwbox{
		   width: 632rpx;
		   height: 337rpx;
		   background: rgba(22,142,236,0.05);
		   border-radius: 7rpx;
		   margin-top: 20rpx;
		       padding: 10px;
		       box-sizing: border-box;
			   position:relative;
		   .hwtle{
			   width: 116rpx;
			   height: 40rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 500;
			   font-size: 29rpx;
			   color: #168EEC;
			   line-height: 40rpx;
			   text-align: left;
			   font-style: normal;
			   // margin: 20rpx;
		   }
		   .wz{
			    position: absolute; 
		   }
		   .hwtb{
			   width: 144rpx;
			   height: 139rpx;
			   position: absolute;
			   right: 13px;
			       top: 57px;
				   background: url(/static/img/ljlc/hw_img.png) no-repeat;
				   			background-size: 100% 100%;
			   
		   }
	   }
	}
	.item_top {
		width: 107rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 29rpx;
		color: #168EEC;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		
	}
.item{
	width: 692rpx;
	height: 250rpx;
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 10px;
	box-sizing: border-box;
	margin-top: 10px;
}
.item_title{
	width: 132rpx;
}
	.item_cont {
		width: calc(100% - 40rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 16rpx 20rpx;
		color: #666666;
		font-size: 28rpx;
		background: #fff;

		.cont_li {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			// justify-content: space-between;
			justify-content: space-between;
			flex-wrap: wrap;

			// .cont_li_label {
			// 	// width: 256rpx;
			// }

			// .cont_li_value {
			// 	// flex: 1;
			// }
		}
	}

	// .black_bar {
	// 	width: 100%;
	// 	height: 20rpx;
	// 	background: #F5F5F5;
	// }
	.itemz{
		width: 692rpx;
		height: 1627rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 10px;
	}
	.xian{
		width: 636rpx;
		height: 0rpx;
		border: 2rpx dashed #F1F1F1;
		margin-bottom: 20rpx;
	}
</style>